<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title>大准铁路安全接近告警系统</title>
	<link rel="stylesheet" type="text/css" href="./static/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./static/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./static/scripts/vis.css">
	<!-- <link rel="stylesheet" type="text/css" href="./CSS/demo.css"> -->
	<link rel="stylesheet" type="text/css" href="./static/css/index.css">
	<script type="text/javascript" src="./static/scripts/jquery.min.js"></script>
	<script type="text/javascript" src="./static/scripts/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="./static/scripts/vis.js"></script>
	<style type="text/css">
		h1 {
			margin-bottom: 2px;
			margin-top: 2px;
		}

		#vis_network {
			width: 400px;
			height: 800px;
			border: 0px solid lightgray;
			background-color: #222222;
		}
	</style>

</head>

<body class="easyui-layout">
	<!-- <div style="margin:10px 0;"></div> -->
	<div data-options="region:'north',border:false" style="height:40px;background:#B3DFDA;padding:1px">
		<h1>大准铁路接近告警系统OMC</h1>
	</div>
	<div data-options="region:'west',split:true, title:'车站'" style="width:300px;padding:10px">
		<ul class="easyui-tree" data-options="data:treeStation,lines:true"></ul>
	</div>

	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:5px;">east region</div>
	<div data-options="region:'south',border:false" style="height:30px;background:#A9FACD;padding:5px;">CopyRight 2018 天津七一二通信广播股份有限公司</div>
	<div data-options="region:'center'">
		<table id="dg" class="easyui-datagrid" title="日志信息" style="width:100%;height:500px" fit=true data-options="singleSelect:true,fitColumns:true">
			<thead>
				<tr>
					<th data-options="field:'infotime',width:120">收到时间</th>
					<th data-options="field:'station',width:100">固定台</th>
					<th data-options="field:'content',align:'left',width:500,fitColumns:true">内容</th>
				</tr>
			</thead>
		</table>
	</div>

	<script type="text/javascript" src="./static/js/station.js"></script>
	<script type="text/javascript" scr="./static/js/ws.js"></script>
	<script>
		function p(s) {
			return s < 10 ? '0' + s : s;
		}

		function GetNowTime() {
			var myDate = new Date();
			//获取当前年
			var year = myDate.getFullYear();
			//获取当前月
			var month = myDate.getMonth() + 1;
			//获取当前日
			var date = myDate.getDate();
			var h = myDate.getHours(); //获取当前小时数(0-23)
			var m = myDate.getMinutes(); //获取当前分钟数(0-59)
			var s = myDate.getSeconds();
			return year + '-' + p(month) + "-" + p(date) + " " + p(h) + ':' + p(m) + ":" + p(s);
		}
		$(function () {
			conn = new WebSocket("ws://127.0.0.1:8080/ws");
			conn.onclose = function (evt) {
				console.log('close')
			}
			conn.onmessage = function (evt) {
				console.log('收到中心数据>', evt.data)
				var jsonobj = JSON.parse(evt.data)
				var contentobj = JSON.parse(jsonobj.content)
				$('#dg').datagrid('insertRow', {
					index: 0,
					row: {
						infotime: GetNowTime(),
						station: contentobj.Ipaddr,
						content: contentobj.Info
					}
				})
			}
		});

		$(window).on('beforeunload', function (event) {
			$.ajax({
				url: "/login",
				type: "post",
				dataType: "json",
				data: {
					"op": "logout",
				},
				success: function (json) {
					console.log(json)
					var message = 'I’m really going to miss you if you go.';
					event.returnValue = message;
					return message;
				}

			});
		});
	</script>

</body>

</html>